<template>
  <div class="tool-page">
    <PageHeader v-if="simpleUtils.isMobile()" :title="title" @on-back="onBack" back hidden-breadcrumb/>
    <Card class="generate-card" :title="title" dis-hover>
      <div class="top-left-tip">
        <span v-if="$store.getters.getOpenToolHistory" class="link-style" @click="onHistoryOpen">历史记录</span>
      </div>
      <div class="value-length">长度：{{ valueLength || (value ? value.length : 0) }}</div>
      <div style="text-align: center; margin-top: 4px">
        <div class="value">
          {{ this.hasValueSlot ? '' : value }}
          <slot name="value"></slot>
        </div>
        <div>
          <slot name="extra"></slot>
        </div>
        <Row justify="center">
          <Space style="margin-top: 20px" wrap>
            <slot name="operate"></slot>
          </Space>
        </Row>
        <Row justify="center">
          <Space style="margin-top: 20px" wrap>
            <slot name="operateButton"></slot>
          </Space>
        </Row>
        <Space style="margin-top: 20px" v-if="!hiddenOperate" wrap>
          <slot name="buttonBefore"></slot>
          <Button type="primary" class="generate-button" v-if="!hiddenGenerateButton" @click="onClick">点击生成</Button>
          <Button @click="copy">点击复制</Button>
        </Space>
        <slot></slot>
        <div class="generate-card-footer" v-if="remark">
          <Divider/>
          <Text v-if="remark" type="secondary">{{ remark }}</Text>
        </div>
      </div>
      <transition name="slide-up">
        <div class="history-list" v-if="historyOpen">
          <Table border :columns="historyColumn" :height="300" :data="historyList" stripe>
            <template #action="{ row, index }">
              <Button type="primary" size="small" style="margin-right: 10px" @click="$Copy({text: row.value})">复制
              </Button>
              <Button type="error" size="small" @click="onHistoryDelete(index)">删除
              </Button>
            </template>
          </Table>
        </div>
      </transition>
    </Card>
  </div>
</template>

<script>

export default {
  name: "ToolPage",
  data() {
    return {
      historyColumn: [{
        title: '内容',
        key: 'value',
        minWidth: 200,
        tooltip: true
      }, {
        title: '生成时间',
        key: 'date',
        width: 170
      }, {
        title: '操作',
        slot: 'action',
        width: 150,
        align: 'center'
      }],
      historyList: [],
      historyOpen: false
    }
  },
  props: {
    title: String,
    value: String,
    valueLength: Number,
    remark: String,
    hiddenOperate: Boolean,
    hiddenGenerateButton: Boolean
  },
  watch: {
    value: {
      handler() {
        if (!this.value || this.value === '--') return;
        this.addHistory(this.value, this.$parent.$options.name);
        this.historyList = this.getHistory(this.$parent.$options.name);
      },
      immediate: true
    }
  },
  computed: {
    hasValueSlot() {
      return this.$slots.value !== undefined;
    }
  },
  methods: {
    onClick() {
      this.$emit('generate');
    },
    copy() {
      if (this.$attrs.onCopy) {
        this.$emit('copy', this.value);
      } else {
        this.$Copy({
          text: this.value
        })
      }
    },
    onBack() {
      this.$router.back();
    },
    onHistoryOpen() {
      if (this.historyOpen) {
        this.historyOpen = false;
      } else {
        this.historyList = this.getHistory(this.$parent.$options.name);
        this.historyOpen = true;
      }
    },
    onHistoryDelete(index) {
      const historyList = this.historyList = this.historyList.filter((value, i) => index !== i);
      this.setHistory(this.$parent.$options.name, historyList);
    },
    refreshHistory(name) {
      this.historyList = this.getHistory(name);
    }
  },
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .generate-card {
    width: 90% !important;
  }
}

.generate-card {
  margin: 140px auto 0;
  width: 800px;

  .generate-card {
    transition: height .3s;
  }

  .top-left-tip {
    color: #abadad;
    position: absolute;
    top: 6px;
    left: 10px;
  }

  .value-length {
    color: #abadad;
    position: absolute;
    top: 6px;
    right: 10px;
  }

  .value {
    font-size: 30px;
    font-weight: bold;
    word-wrap: break-word;
  }

  .fixed-top-right {
    position: absolute;
    top: 0;
    right: 0;
  }

  .generate-card-footer {
    margin-top: 20px;

    .ivu-divider {
      margin: 10px 0;
    }
  }

  .history-list {
    margin-top: 20px;
  }
}

:deep(.ivu-card-body) {
  position: relative;
}
</style>
